<!DOCTYPE html>
<html>
<head>
	<meta name="renderer" content="webkit">
    <meta charset="utf-8" />
    <title>管理员登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" />
	 <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="js/ieold.js"></script>
    <![endif]-->
	<style>
	body{
		font-family: 'microsoft yahei',Arial,sans-serif;
		background-color: #222;
	}

	.redborder {
		border:2px solid #f96145;
		border-radius:2px;
	}

	.row {
		padding: 20px 0px;
	}

	.bigicon {
		font-size: 97px;
		color: #f08000;
	}

	.loginpanel {
		text-align: center;
		width: 300px;
		border-radius: 0.5rem;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 10px auto;
		background-color: #555;
		padding: 20px;
	}

	input {
		width: 100%;
		margin-bottom: 17px;
		padding: 15px;
		background-color: #ECF4F4;
		border-radius: 2px;
		border: none;
	}

	h2 {
		margin-bottom: 20px;
		font-weight: normal;
		color: #EFEFEF;
	}

	.btn {
		border-radius: 2px;
		padding: 10px;
	}

	.btn span {
		font-size: 27px;
		color: white;
	}

	.buttonwrapper{
		position:relative;
		overflow:hidden;
		height:50px;
	}

	.lockbutton {
		font-size: 27px;
		color: #f96145;
		padding: 10px;
		width:100%;
		position:absolute;
		top:0;
		left:0;
	}

	.loginbutton {
		background-color: #f08000;
		width: 100%;
		-webkit-border-top-right-radius: 0;
		-webkit-border-bottom-right-radius: 0;
		-moz-border-radius-topright: 0;
		-moz-border-radius-bottomright: 0;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		left: -260px;
		position:absolute;
		top:0;
	}
	</style>
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
	
</head>
<body>

<!-- Interactive Login - START -->
<div class="container-fluid">
    <div class="row">
        <div class="loginpanel">
			<i id="loading" class="hidden fa fa-spinner fa-spin bigicon"></i>
            <h2>
				<span class="fa fa-quote-left "></span> 登录 <span class="fa fa-quote-right "></span>
			</h2>
            <div>
            	<h1 style="color:#F00" id="message"></h1>
                <input id="username" type="text" placeholder="登录账号" onkeypress="check_values();">
                <input id="password" type="password" placeholder="输入密码" onkeypress="check_values();">
                <input id="yzcode" type="text" placeholder="验证码" onkeypress="check_values();">
				<div id="yzimg"><img alt="验证码" src="../yzcode.jpg"></div><br>
                <a onClick="return photo();">刷新一下</a>
				<div class="buttonwrapper">
					<button id="loginbtn" class="btn btn-warning loginbutton">
						<span class="fa fa-check"></span>
					</button>
					<span id="lockbtn" class="fa fa-lock lockbutton redborder"></span>
				</div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">


    function check_values() {
        if ($("#username").val().length != 0 && $("#password").val().length != 0&& $("#yzcode").val().length != 0) {
            $("#loginbtn").animate({ left: '0' , duration: 'slow'});;
            $("#lockbtn").animate({ left: '260px' , duration: 'slow'});
			return true;
        }
		return false;
    }	
	$("#loginbtn").click(function(){
		$('#loading').removeClass('hidden');
		$.post("../tologin", { name: $("#username").val(), password: $("#password").val(),
		yzcode: $("#yzcode").val() },
				   function(data){
				      	if(data.status > 200){
							$('#loading').addClass('hidden');
							photo();
							$("#message").html(data.msg);
						}else{
							$("#message").html(data.msg);
							window.location.href=data.link;
						}			
				   });
	});
	$('html').bind('keydown',function(e){
      if(e.keyCode==13){
      	if(check_values())
      		$("#loginbtn").click();
      }
  });
function photo(){
		$("#yzimg").html("<img  src=\"../yzcode.jpg\">");
		return false;
	}
</script>
<!-- Interactive Login - END -->
<div class="container-fluid">
	<div class="row footerbox">
		<div class="col-md-1"></div>
		<div class="col-md-10">
		<footer class="text-center">
			<a href="/flowboard"><i class="fa fa-external-link"></i> 访问网站首页</a>
		</footer>
		</div>
		<div class="col-md-1"></div>
	</div>
</div>
</body>
</html>